<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="" type="primary" @click="dialogVisible = true"
          >添加</el-button
        >
      </div>
      <conper
        v-bind:message="list"
        v-on:titleChanged="getValue"
        v-on:tplet="delpoop"
      ></conper>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-dialog
          title="添加品牌"
          :visible.sync="dialogVisible"
          width="70%"
          :before-close="handleClose"
        >
          <el-row :gutter="20">
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-form-item label="品牌名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-form-item label="首字母">
                  <el-input v-model="ruleForm.firstLetter"></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-form-item label="排序">
                  <el-input v-model="ruleForm.sort"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-form-item label="产品数量">
                  <el-input v-model="ruleForm.productCount"></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-form-item label="是否展示">
                  <el-switch
                    v-model="ruleForm.showStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </el-form-item></div
            ></el-col>
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-form-item label="是否品牌制造商">
                  <el-switch
                    v-model="ruleForm.factoryStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-upload
                  class="upload-demo"
                  action="/lejuAdmin/material/uploadFileOssSave"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img
                    v-if="ruleForm.logo"
                    :src="ruleForm.logo"
                    class="avatar"
                    style="width: 150px; height: 150px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload></div
            ></el-col>
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-upload
                  class="upload-demo"
                  action="/lejuAdmin/material/uploadFileOssSave"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessAPI"
                >
                  <img
                    v-if="ruleForm.bigPic"
                    :src="ruleForm.bigPic"
                    class="avatar"
                    style="width: 150px; height: 150px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload></div
            ></el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-form>
    </el-card>
  </div>
</template>

<script >
import {
  findAllBrand,
  addBrand,
  updateBrand,
  delBrand,
} from "@/api/product/index";
import conper from "./conper";
import { getToken } from "@/utils/myAuth";
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      cood: true, //判断创建方式
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      ruleForm: {
        bigPic: "", //专区大图
        brandStory: "", //品牌故事
        createTime: "", //创建时间
        factoryStatus: "", // 是否为品牌制造商：0->不是；1->是
        firstLetter: "", //首字母
        id: "",
        logo: "", //品牌logo
        modifyTime: "", //更新时间
        name: "",
        productCommentCount: "", //产品评论数量
        productCount: "", //产品数量
        showStatus: "", //是否展示: 0-> 否 , 1-> 是
        sort: "",
      }, //表单
    };
  },
  created() {
    this.findAllBrandAPI();
  },
  components: { conper },

  computed: {
    headers() {
      return { token: getToken() };
    },
  },

  mounted() {},

  methods: {
    //删除品牌
    delpoop(row) {
      var _this = this;
      console.log(row);
      this.$confirm("此操作将删除该品牌信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBrand(row.id).then((res) => {
            if (res.success) {
              _this.$message.success("删除成功");
              this.findAllBrandAPI();
            } else {
              _this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //   新建品牌
    submitForm(formName) {
      var _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("是否提交");
          if (this.cood === true) {
            addBrand(this.ruleForm).then((res) => {
              console.log(res);
              if (res.success) {
                _this.$message.success("创建成功");
                _this.$data.ruleForm = _this.$options.data().ruleForm;
                _this.dialogVisible = false;
                (_this.cood = true), this.findAllBrandAPI();
              } else {
                _this.$message.success("创建失败");
              }
            });
          } else {
            updateBrand(this.ruleForm).then((res) => {
              if (res.success) {
                _this.$message.success("创建成功");
                _this.$data.ruleForm = _this.$options.data().ruleForm;
                _this.dialogVisible = false;
                (_this.cood = true), this.findAllBrandAPI();
              } else {
                _this.$message.success("创建失败");
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAvatarSuccessAPI(res, file) {
      this.ruleForm.bigPic = URL.createObjectURL(file.raw);
      console.log(this.ruleForm.bigPic);
    },
    handleAvatarSuccess(res, file) {
      this.ruleForm.logo = URL.createObjectURL(file.raw);
    },
    findAllBrandAPI() {
      var _this = this;
      findAllBrand().then((res) => {
        console.log(res);
        if (res.success) {
          _this.list = res.data.items;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭关闭？内容不会保存!!!")
        .then((_) => {
          done();
          (this.cood = true),
            (this.$data.ruleForm = this.$options.data().ruleForm);
        })
        .catch((_) => {});
    },
    //子组件传值
    getValue(row) {
      console.log(row);
      this.cood = false;
      this.ruleForm = row;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
</style>